<% content_for :head do %>
    <title>NoiseTube | City Page</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<%=  javascript_include_tag "jquery.timeago" %>
<script type="text/javascript">

    var map;

    $(document).ready(function() {

        var latlng = new google.maps.LatLng(20, 0);
        var myOptions = {
            zoom: 2,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    });
    var infowindow = new google.maps.InfoWindow({content: "<div class = '.infowindow'><i>Loading...</i></div>"});
    function add_marker(map, city_name, measure_id, lat, lng) {
        var myLatlng = new google.maps.LatLng(lat, lng);
        var marker = new google.maps.Marker({position: myLatlng, map: map, title:city_name});

        google.maps.event.addListener(marker, 'click', function() {
                    //test
                    infowindow.close();
                    infowindow.setContent("<div>marker with measurement</div>");
            infowindow.open(map, marker);
            $.getJSON("/ajax/measureinfo?param=" + measure_id, function(data){

                //format the string
                var text = "";

                //set leq_image for the city
                infowindow.setContent(text);

                //console.dir(data);
            });

        });
    }

    //load measurements as markers onto the map
    function loadMeasuresOnMap(result){

        var bounds = new google.maps.LatLngBounds ();

        $.each(result.measures, function(index, measure){
            add_marker(map, "Measurement", measure.id, measure.lat, measure.lng);

            // create for extending bounds
            var latlng = new google.maps.LatLng(measure.lat, measure.lng);

            // increase the bounds to take this point
            bounds.extend (latlng);

        });
        //  Fit these bounds to the map
        if (result.measures.length > 0)
            map.fitBounds (bounds);
    }
</script>
    <% end %>
<div class="intro">
  <h3><%= t 'cities.iscope.infobox.title' %> </h3>
  <p><%=  t 'cities.iscope.infobox.desc' %></p>
</div>
<br/>

<h3><%=@tracks.size %> tracks</h3>
<div id="map_canvas" style="width:90%; height:400px"></div>
<p><br/></p>
<p>
    <h3><%= t 'cities.headings.cityinfo' %></h3>
<div style="width: 90%">
<a href="/cities/<%= @city.id %>.rss"><img align="absmiddle" src="/images/icons/georss.png" alt="GeoRSS"/></a>&nbsp;<b>City name:</b> <%= @city.name %>, <%= @city.country %>
<div style="float: right">
<a href="/cities/<%= @city.id %>/querycity"><img align="absmiddle" src="/images/NoiseTubeMNTIcon55x55.png" style="width: 32px; height: 32px; margin-right: 5px;" alt="GeoRSS"/>Query data</a>
  </div>
<br /> <br />
    <img src="/api/leqdist.png?city=<%= @city.id %>&size=160x80"/>

    <% if @city[:has_map] %>
          <%=link_to image_tag("/images/icons/KML_32x32.png"), city_url(@city, :format=>"kmz") %>
      <% end %>


<br />
</p>
</div>
<hr />
<h3><%= t 'cities.headings.tracksforcity' %></h3>

<div id="results">

<%#*<div style="margin:5px">sorted by: date, average exposure, duration, geo coverage%>

  <center style="font-size:12px"> <%= will_paginate @tracks  %>  </center>
  <br/>
  <ul style=" align:left; overflow: auto; list-style: none inside; ">
    <%
       #distance_of_time_in_words(t.start, t.end)
       @tracks.each_with_index {|t,i|
         if t.processed
    %>
            <li style="background-color: rgb(235, 235, 235);padding-left:0px; margin-left:20px;margin-bottom:20px">
              <table  class="borderless" width="100%" border="0" cellpadding="0" cellspacing="0">
                <tbody>
                <tr>
                  <td width="15"><img src="/images/roundedcornr_348668_tl.png" alt="Rounded Corner: Top-left" border="0" height="15"/></td>
                  <td></td>
                  <td width="15"><img src="/images/roundedcornr_348668_tr.png" alt="Rounded Corner: Top-right" border="0" height="15"/></td>
                </tr>
                <tr>
                  <td></td>
                  <td>
                    <div class="header">
                      <div style="float:left">
                        <b>Start time:</b> <font style="font-size: 11px;" color="#777777"><%= t.starts_at %></font><br/>
                        <b>End time:</b> <font style="font-size: 11px;" color="#777777"><%= t.ends_at %> (<%=distance_of_time_in_words(t.ends_at, Time.now) unless t.ends_at.nil? %> ago)</font>
                      </div>
                      <div style="float:right">
                        <a href="/users/<%=  @user.id %>/tracks/<%= t.id  %>.json"><img src="/images/icons/data-download.jpg" align="absmiddle" alt="Download data" style="width: 16px; height: 16px;"/>&nbsp;Data</a>
                        <%  if logged_in? && @user == current_user %>
                            &nbsp;&nbsp;
                            <a href="#" id="trackmap-<%= t.id %>" >
                                <img src="/images/icons/GoogleEarth_16x16.png" align="absmiddle" alt="Load map"/>&nbsp;<%= t 'cities.links.showonmap' %>
                            </a>
                        <% end%>
                      </div>
                      <br/><br/><br/>
                    </div>

                    <div style="float:left">
                      <table>
                        <tr>
                          <td valign="top" align="left" width="350">
                            <b>Frequent tags: </b>
                            <!-- <img src="/images/icons/tag.png" align="absmiddle" alt="Tags">&nbsp;<br/>-->

                            <div id="track-<%= t.id %>" class="track-tags">
                              <a href="#" id="link-<%= t.id %>">Click to load..</a>

                              <script type="text/javascript">
                                  $(function(){
                                      //get the tags for this track using ajax, for faster page load
                                      $('#link-<%= t.id %>').on('click', function(e) {
                                          //get the parent id
                                          var div = $(this).parent("div");
                                          var div_id = div.attr("id");
                                          //show loader
                                          var loader =new ajaxLoader(this, {});
                                          $.get("/ajax/get_tags_html?track="+div_id, function(data) {
                                              loader.remove();
                                              if (data && data !== "[]" && data !== "")
                                                  div.html(data);
                                              else
                                                  div.html("(No tags)");
                                          });

                                          e.preventDefault();
                                          return false;
                                      });

                                      //load the map's measures on click
                                      $('#trackmap-<%= t.id %>').on('click', function(e) {
                                          //get the parent id
                                          var link_id = $(this).attr("id");
                                          $.get("/ajax/get_trackmap?track="+link_id, function(data) {
                                              if (data && data !== "[]" && data !== ""){
                                                  //load the map
                                                  loadMeasuresOnMap(data);
                                                  //focus map
                                                  $('html, body').animate({ scrollTop: $('#map_canvas').offset().top }, 'slow');
                                                  //reset the text
                                                  $('#'+link_id).text("<%= t 'cities.links.shownonmap' %>")
                                               }
                                              else {
                                                  console.log("Could not load the map. ");
                                              }
                                          });

                                          e.preventDefault();
                                          return false;
                                      });
                                  });
                              </script>
                            </div>
                          </td>
                          <td width="50" valign="top">

                          </td>
                        </tr>
                      </table>

                      <table align="left" width="400"><tr>
                        <td valign="top"><b>Measurements: </b>
                          <font style="font-size: 11px;" color="#777777"> <br/>
                            Duration: <% if t.try(:starts_at) %>
                                <%=  distance_of_time_in_words(t.ends_at,t.starts_at)  %> <br/>
                            <% else %>
                                (unknown)
                            <% end %>
                            #Measurements: <%= t.try(:count) %> <br/>
                            Average: <%= t.try(:avgloudness) %> dB(A)<br/>
                            <% if t.try(:geolocated) %>
                                Distance covered: <%= t.distance.to_i %> m<br/>
                            <% end %>
                          </font>
                        </td>
                        <td valign="top"><img src="/users/<%= @user.id%>/tracks/<%= t.id  %>.png?size=230x100"/></td>
                      </tr></table>
                    </div>
                    <div style="float:right;width:140px" >
                      <% if t.geolocated and not t.geom.nil? #nil check just to be sure
                           center=t.geom.envelope.centroid
                      %>
                          <img src="http://maps.google.com/staticmap?key=ABQIAAAAEDqSJ7sjOq1o3M9HFMUctBTP6FiD4Pq0_NOM64wEPpZs4eDxtRS5-gQAVDwr5RxsOtxOMbZGzM-pjQ&sensor=true&center=<%=center.lat%>,<%=center.lng%>&zoom=13&size=120x120" width="120"/><br/>
                          <a href="/users/<%= @user.id %>/tracks/<%= t.id %>.kml"><img src="/images/icons/KML_16x16.png" align="absmiddle" alt="KML"/>&nbsp;<font size="2px" style="color:#999999">Map</font></a><br/>
                          <% if File.exists?("#{Rails.root}/public/tours/tour#{t.id}.kml") %>
                              <a href="/tours/tour<%= t.id  %>.kml"><img src="/images/icons/KML_16x16.png" align="absmiddle" alt="KML"/>&nbsp;<font size="2px" style="color:#999999">Animated map</font></a>
                          <% end
                             end %>
                    </div>

                  </td><td></td></tr>
                <tr>
                  <td><img src="/images/roundedcornr_348668_bl.png" alt="" border="0" width="15" height="15"/></td>
                  <td></td>
                  <td><img src="/images/roundedcornr_348668_br.png" alt="" border="0" width="15" height="15"/></td>
                </tr>
                </tbody></table>
            </li>

        <%  else %>
            <li >
              <table cellpadding="5" cellspacing="0" style="background-color: rgb(240, 240, 240); width:540px;padding:5px">
                <tr><td>
                  <b>Start time:</b><font style="font-size: 11px;" color="#777777"> <%= t.starts_at %> (<%=distance_of_time_in_words(t.starts_at, Time.now) unless t.starts_at.nil? %> ago) </font><br/>
                  <p><center><b>
                  <%= t 'users.show.tracknotprocessed'  %></b>
                </center></p>
                </td></tr>
              </table>
              <hr style="background-color:#FFFFFF"/>
            </li>
        <%  end %>


    <% } %>
  </ul>
</div>